<template>
  <div>
    <el-form :model="searchForm" inline>
      <el-form-item label="标题">
        <el-input v-model="searchForm.title" placeholder="标题" clearable></el-input>
      </el-form-item>
      <el-form-item label="作者">
        <el-input v-model="searchForm.author" placeholder="作者" clearable></el-input>
      </el-form-item>
      <el-form-item label="文章状态">
        <el-select placeholder="选择文章状态" v-model="searchForm.articleStatus" clearable>
          <el-option :value="1" label="发布"/>
          <el-option :value="2" label="草稿"/>
        </el-select>
      </el-form-item>
      <el-form-item label="状态">
        <el-select placeholder="选择状态" v-model="searchForm.status" clearable>
          <el-option :value="1" label="可用"/>
          <el-option :value="2" label="禁用"/>
        </el-select>
      </el-form-item>
      <el-form-item label="发布日期">
        <el-date-picker v-model="timeRange" type="daterange" range-separator="至" start-placeholder="开始日期"
                        end-placeholder="结束日期" value-format="yyyy-MM-dd">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getDataList">查询</el-button>
        <el-button @click="updateArticle()">新增</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="dataList" border>
      <el-table-column prop="articleId" label="编号" align="center"/>
      <el-table-column prop="title" label="标题" show-overflow-tooltip align="center"/>
      <el-table-column prop="applyTime" label="发布时间" align="center"/>
      <el-table-column prop="status" label="状态" align="center">
        <template slot-scope="scope">
          <el-button size="small" title="点击切换状态" @click="changeStatus(scope.row.articleId,2)"
                     v-if="scope.row.status === 1" type="success">可用
          </el-button>
          <el-button size="small" title="点击切换状态" @click="changeStatus(scope.row.articleId,1)" v-else
                     type="danger">禁用
          </el-button>
        </template>
      </el-table-column>
      <el-table-column prop="articleStatus" label="文章状态" align="center">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.articleStatus === 1" type="success">发表</el-tag>
          <el-tag v-else type="warning">草稿</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="文章数据" align="center">
        <template slot-scope="scope">
          <el-button size="small" @click="showComment(scope.row.articleId)">评论</el-button>
          <el-button size="small" @click="showCategory(scope.row.categoryList)">类型</el-button>
          <el-button size="small" @click="showArticle(scope.row.articleId)">预览</el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" fixed="right">
        <template slot-scope="scope">
          <el-button size="small" type="primary" @click="updateArticle(scope.row.articleId)">修改</el-button>
          <el-button size="small" type="warning" @click="deleteInfo(scope.row.articleId)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination v-if="total > searchForm.limit" :current-page="searchForm.page" :page-size="searchForm.limit"
                   :total="total" :page-sizes="[5,10,20,30,50,100]" layout="total,sizes,prev,pager,next,jumper"
                   @current-change="currentChange" @size-change="sizeChange"></el-pagination>
    <ArticleCategory ref="articleCategory" :category-list="categoryList"/>
    <ArticlePreview ref="articlePreview"/>
    <ArticleComment ref="articleComment"/>
  </div>
</template>

<script>
import ArticleCategory from '@/views/admin/article/ArticleCategory.vue'
import ArticlePreview from '@/views/admin/article/ArticlePreview.vue'
import ArticleComment from '@/views/admin/article/ArticleComment.vue'

export default {
  name: 'ArticleList',
  components: {
    ArticleCategory,
    ArticlePreview,
    ArticleComment
  },
  data () {
    return {
      searchForm: {
        title: '',
        author: '',
        articleStatus: '',
        applyTimeRange: '',
        status: '',
        page: 1,
        limit: 5
      },
      dataList: [],
      total: 0,
      timeRange: [],
      categoryList: []
    }
  },
  methods: {
    currentChange (value) {
      this.searchForm.page = value
      this.getDataList()
    },
    sizeChange (value) {
      this.searchForm.limit = value
      this.getDataList()
    },
    updateArticle (articleId) {
      if (articleId) {
        this.$router.push(`apply?articleId=${articleId}`)
      } else {
        this.$router.push('apply')
      }
    },
    deleteInfo (articleId) {
      this.$confirm(`确定删除编号[${articleId}]的数据吗？`, { type: 'info' }).then(() => {
        this.$http.delete(`admin/article/delete/${articleId}`).then(() => {
          this.$alert('删除成功', { type: 'success' }).then(() => {
            this.getDataList()
          })
        })
      })
    },
    getDataList () {
      this.searchForm.applyTimeRange = this.timeRange?.toString()
      this.$http.get('admin/article/page', this.searchForm).then(data => {
        this.dataList = data.data.records
        this.searchForm.page = data.data.current
        this.searchForm.limit = data.data.size
        this.total = data.data.total
      })
    },
    changeStatus (articleId, status) {
      this.$confirm(`确定更改编号[${articleId}]的状态为[${status === 1 ? '可用' : '禁用'}]吗？`).then(() => {
        this.$http.post('admin/article/status', {
          articleId,
          status
        }).then(() => {
          this.$message.success('更改状态成功')
          this.getDataList()
        })
      })
    },
    showCategory (categoryList) {
      this.categoryList = categoryList
      this.$refs.articleCategory.init()
    },
    showArticle (articleId) {
      this.$refs.articlePreview.init(articleId)
    },
    showComment (articleId) {
      this.$refs.articleComment.init(articleId)
    }
  },
  created () {
    this.getDataList()
  }
}
</script>

<style scoped>

</style>
